<script lang="ts" setup>
import {onBeforeUnmount, ref, watch} from "vue";
import useCategoryStore from "../../../store/modules/category.ts";
import {reqHasSpu, reqRemoveSpu, reqSkuList} from "../../../api/product/spu";
import type {HasSpuResponseData, SkuData, SpuData} from "../../../api/product/spu/type.ts";
import SpuForm from "./spuForm.vue";
import SkuForm from "./skuForm.vue";
import {ElMessage} from 'element-plus';

let categoryStore = useCategoryStore();//引入仓库

let scene = ref<number>(0);//控制页面消失与出现
let currentPage = ref<number>(1);//当前页数，从1开始
let pageSize = ref<number>(3);//每页展示数目
let total = ref<number>();//总记录数

//封装分页查询请求
const reqPage = async (page = 1) => {
  currentPage.value = page;
  const result: HasSpuResponseData = await reqHasSpu(currentPage.value, pageSize.value, categoryStore.c3Id);
  if (result.code === 200) {
    categoryStore.spuArr.length = 0;//请求前清空仓库spuArr的数据，不然会有残留
    Object.assign(categoryStore.spuArr, result.data.records);//把数据存到仓库中
    currentPage.value = result.data.current;
    pageSize.value = result.data.size;
    total.value = result.data.total;
  }
}

//监听仓库中c3Id的值，只要变化，就请求
watch(() => categoryStore.c3Id, async () => {
  if (categoryStore.c3Id) await reqPage();
});

//获取子组件实例
const spu = ref<any>();
const sku = ref<any>();

//添加spu的方法
const addSpu = () => {
  spu.value.initAddSpu();
  scene.value = 1;
}

//修改spu的方法
const updateSpu = (row: SpuData) => {
  //被子组件利用，让他拿spuid发请求
  spu.value.reqAll(row)
  scene.value = 1;
}

//返回场景0的方法,这是要传给子组件的，通过自定义事件
const backPage = (id: number) => {
  scene.value = 0;
  if (id) {
    reqPage(currentPage.value);
  } else {
    reqPage();
  }
}

//前往sku
const addSku = (row: SpuData) => {
  sku.value.initAddSku(row);
  scene.value = 2;
}

const skuParams = ref<SkuData[]>();//定义一个变量接受sku
let isShow = ref(false);//定义一个变量控制对话框的出现和消失

//查看已有的sku
const lookSku = async (row: SpuData) => {
  const result = await reqSkuList(row.id as number);
  if (result.code === 200) {
    skuParams.value = result.data;
    isShow.value = true;
  } else {
    return;
  }
}

//删除spu
const deleteSpu = async (row: SpuData) => {
  let result = await reqRemoveSpu(row.id as number);
  if (result.code === 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    });
    await reqPage(categoryStore.spuArr.length > 1 ? currentPage.value : currentPage.value - 1);
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}

onBeforeUnmount(() => {
  categoryStore.$reset();
  skuParams.value = []
});

</script>

<template>
  <Category :scene="scene"/>
  <el-card style="margin-top: 10px">
    <div v-show="scene === 0">
      <el-button :disabled="!categoryStore.c3Id" icon="Plus" type="primary" @click="addSpu">添加spu</el-button>
      <el-table :data="categoryStore.spuArr" border style="margin: 10px 0">
        <el-table-column align="center" label="序号" type="index" width="80px"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
        <el-table-column label="SPU操作">
          <template #default="{row}">
            <el-button icon="Plus" size="small" title="增加spu" type="primary" @click="addSku(row)"></el-button>
            <el-button icon="Edit" size="small" title="编辑spu" type="primary" @click="updateSpu(row)"></el-button>
            <el-button icon="View" size="small" title="查看sku" type="primary" @click="lookSku(row)"></el-button>
            <el-popconfirm :title="`确定删除${row.spuName}`" width="200px" @confirm="deleteSpu(row)">
              <template #reference>
                <el-button icon="Delete" size="small" title="删除spu" type="primary"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7, 9]"
          :total="total"
          background
          layout="prev, pager, next, jumper,-> , sizes, total"
          @size-change="reqPage(1)"
          @current-change="reqPage(currentPage)"
      />
    </div>
    <SpuForm v-show="scene === 1" ref="spu" @backPage="backPage"/>
    <SkuForm v-show="scene === 2" ref="sku" @backPage="backPage"/>
  </el-card>
  <el-dialog v-model="isShow">
    <el-table :data="skuParams">
      <el-table-column label="sku名字" prop="skuName"></el-table-column>
      <el-table-column label="sku价格" prop="price"></el-table-column>
      <el-table-column label="sku重量" prop="weight"></el-table-column>
      <el-table-column label="sku图片">
        <template #default="{row}">
          <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px">
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>